Layout Management
Layouts are the main data visualization page for users and sit at the highest level of the user defined interface. They are essentially the data visualization dashboards of SCS and are at their core simply wrappers around Widget Groups. Much like Events and other high level components of the website, Layouts take up a full screen when running.
Widget Groups are used to wrap 1 or more widgets together in a set. Layouts are used to wrap 1 or more Widget Groups together in a set.
Layouts are similar to other templates in that they have names, permissions and so forth, however they do not have a separate UI dedicated for running vs editing as with widgets. Instead both running and editing can be done from the same UI. There are a variety of ways to manage Layouts. The general user will see a list of the most recently used Layouts (that their account has permission to see) right on the home page in the form of a link. Clicking the link will bring the user to the run-time page and automatically load the Layout.
If the Layouts of interest isn't listed there, or more advanced management is needed (creation, deletion, etc) then the user has to go to the Manage My Layouts UI. That UI is accessed via the Template link on the main menu or from the Home Page via the Layouts button (Recently Used Layouts block).
Creating Layouts
The only way to create a new layout is via the Manage My Layouts UI.
- Browse to the UI via the Template link on the main menu or from the Home Page via the Layouts button (Recently Used Layouts block).
- Click the +Create New Layout button at the top of the grid.
- You will be directed to the Layout Editor which will be loaded with a new blank layout template ready for you to add Widget Groups to.
Editing Layouts
Editing Layouts is done via the Layout Editor. This is the main UI / dashboard that most users will interact with.
- Browse to the UI via the Template link on the main menu or from the Home Page via the Layouts button (Recently Used Layouts block).
- Find the Layout you want to change in the grid and click the Open/Load button at the end of the row.
- You will see the Layout Editor loaded with the Layout you want to edit. Expand the toolbar slider (cog icon in the upper left) and click Edit
- Make your changes and don't forget to hit Save!
Changes made to layouts will potentially effect all running instances of it throughout the ship.
Edit Mode
The Layout Editor is normally in a Run mode, however when you wish to build or change a Layout you can switch into Edit mode. This is done by expanding the toolbar and clicking Edit. When in Edit mode you will be presented with a layout dialog, all Widget Groups will become editable and everything becomes re-arrangeabe.
Editing and changes in general are restricted based upon your accounts permission level w/regards to the Layout, Widget Groups inside the Layout and even the Widgets themselves on an item by item basis.
Toolbar
When viewing the Layout Editor in the upper left corner you will notice a little box with a cog in it. Clicking on the cog will expand a toolbar which provides additional functionality to the Layout currently running or being edited. Clicking the cog again will collapse the slider back and out of the way.
- Full Screen
- Put the browser into full screen mode
- Run
- Put the editor into "Run" mode, this hooks all the widgets up to their data feeds and makes the layout go 'live'.
- Edit
- Put the editor into "Edit" mode, this allows you to change the look and feel, positions, build or edit widget groups, change permissions, etc
- Save
- Save the changes (if any) you have made to the Layout while in Edit mode
- Save As
- Clicking the arrow next to Save will allow you to save your changes under a different name, this is useful if you don't want to (or can't) effect the original template you were editing
- Clear
- Clear all Widget Groups from the Layout and start fresh
Layout Editor Dialog
Immediately below the toolbar, when in Edit mode, a dialog window will appear which allows you to edit the Layout's name, permissions and other meta data associated with templates. In addition it provides a means for you to create new or add/edit/delete existing Widget Groups to your Layout.
Note the triangular buttons located at the end of the properties group and the widget group (black triangles being pointed to by the red arrows in the image to the left). These buttons will collapse / expand their corresponding section. By default the template properties section is collapsed, if you want to change the Layout's permissions for instance you would have to click the black triangle to see it first.
If you want to create a new Widget Group you can click this button, a new empty group will be placed onto the Layout for you to interact with.
If you want to interact with an existing group first find it in this list. Then there are 3 options you can proceed with:
- Click the pencil icon to edit the group.
- Click the trash can icon to delete the group (permanent delete from database).
- Click the row and then the button at the bottom of the list (+Add Selected Widget Group) to add the selected group to your Layout.
If an Edit or Delete icon is not available it is most likely because the account you are currently logged into SCS with does not have appropriate permissions (eg read only) for the given template.
Editing a Widget Group
When a Widget Group is added to your Layout you will see a bounding box containing 0 or more widgets.
The group will have a small toolbar of its own in the upper right corner.
Click the + icon to add new widgets to the group
Click the pencil icon to edit the properties of the group (permissions, name, etc)
Click the trash can icon to remove the group from the Layout
Click anywhere in the white-space inside a group (be careful not to click inside the boundaries of a widget!) and drag it to move it around on the screen.
At the bottom right corner you will notice a small grab handle. Left click this and drag to resize the Widget Group to best fit the widgets you want to have inside of it.
Clicking the trash can / delete icon removes it from the layout but does NOT remove it from the system. That is accomplished via the Layout Editor Dialog above or via the Manage My Widgets UI
Adding Widgets to a Widget Group
While in Edit mode for a Layout, click the + icon above any Widget Group to add a Widget to it. You will be presented with a UI similar to this one.
You will see a list of all widget types on the left with a triangular button in the middle. As with the editor dialog you have to click the triangle to expand the details for the given section.
For example, in the image on the left you can see the Real-Time Display widgets are being displayed after the black triangle (now pointing down) was clicked.
To edit a widget click the pencil icon on its row.
To delete a widget (from database, permanent) click the trashcan icon on its row.
To add the widget to your group select it (click the row) and click the Load Selected button at the bottom of the list.
You can also create new widgets of the given type via this dialog. To do so click the Create New button and enter the relevant properties (name, permission, etc). Then hit OK.
Once a widget is added it will have it's own bounding box inside the group with it's own resize handle in the lower right corner. You can also click the widget and drag it around on the screen to move it around. However, just as the Widget Group is constrained by the bounds of the Layout (entire window) the Widgets are constrained by the bounds of their containing Widget Group.
You can add as many or as few Widget Groups to your Layout as you like. You can create as many Layouts as you like. When you are happy with your Layout you can save it via the toolbar for future reuse and/or switch into Run mode via the toolbar to turn it on and go like.
If you simply switch to run mode and do not save you will have to recreate it later if browse away from it. No one else will be able to use it (only exists on your browser) until it is saved at least once.
Deleting Layouts
You can only delete an existing Layout via the Manage My Layouts UI.
- Browse to the UI via the Template link on the main menu or from the Home Page via the Layouts button (Recently Used Layouts block).
- Find the Layout you want to delete in the grid and click the Delete button (the one with the trash can).